<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>过滤器+货币</title>
    <script type="text/javascript" src="https://unpkg.com/vue/dist/vue.js"></script>
    <script type="text/javascript" src="https://cdn.jsdelivr.net/accounting.js/0.3.2/accounting.js"></script>
    <style>
        .price{
            text-align: right;
        }
    </style>

    <div id="app">
        <table>
            <thead>
            <tr>
                <th>项目</th>
                <th>价格</th>
            </tr>
            </thead>
            <tbody>
            <tr v-for="item in inventory">
                <td>{{item.name}}</td>
                <td class="price">{{item.price | dollars}}</td>
            </tr>
            </tbody>
        </table>
    </div>
</head>
<body>

<script>

    Vue.filter('dollars', function (money) {
        return accounting.formatMoney(money);
    })
    new Vue({
        el: '#app',
        data: {
            inventory:[
                {name: '卷尺', price: '7'},
                {name: '邮票', price: '0.01'},
                {name: '鲨鱼牙', price: '1.5'},
                {name: 'Iphone', price: '999'}
            ]
        }
    });

</script>

</body>
</html>